<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
    <div>
        <ft-pagination :total="totalElements" :current-page="currentPage" @pageChange="load">
            <div slot="toolbar" style="text-align:left">
                <el-col :span="4" style="display:flex">
                    <el-button type="primary" icon="el-icon-refresh" size="small" @click="load(1, 8)">刷新</el-button>
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addCustomerChange">新增变更</el-button>
                </el-col>
                <!--查询条件-->
                <el-col :span="10" style="display:flex">
                    <ft-advanced-query title="请输入客户名称/编号/证件号码进行搜索" @packup="packup"
                                       @load="search"></ft-advanced-query>
                </el-col>
            </div>
            <el-row v-if="showQueryPanel">
                <!--高级查询-->
                <customer-change-query-form @query="search" @change="queryChange"></customer-change-query-form>
            </el-row>
            <el-table :data='customerChangeArray'
                      tooltip-effect="light"
                      v-loading="loadingStatus">

                <el-table-column min-width="120" align="center" label="业务状态" prop="billStatus.label">

                </el-table-column>
                <el-table-column min-width='120' style="padding-left: 0px;" align='left' label='客户名称' prop='customerName' :show-overflow-tooltip="true">
                    <template slot-scope='scope'>
                        <ft-link-text  @click="changeToDetail(scope.$index, scope.row)"
                                       :text="scope.row.customerName">
                        </ft-link-text>
                    </template>
                </el-table-column>
                <el-table-column prop="identityType" show-overflow-tooltip label="证件类型" align="center" min-width="120">
                    <template slot-scope="scope">
                        <ft-enum-select v-if="scope.row.customerType && scope.row.customerType.value == 'PERSONAL'"
                                        v-model="scope.row.identityType"
                                        :editing="false"
                                        service-name="lss-customer"
                                        type-name="personalType"
                                        size="small"/>
                        <ft-enum-select v-else-if="scope.row.customerType" v-model="scope.row.identityType"
                                        service-name="lss-customer"
                                        :editing="false"
                                        type-name="certificateType"
                                        size="small"/>
                    </template>
                </el-table-column>
                <el-table-column prop="identityNo" show-overflow-tooltip label="证件号码" align="left" min-width="120"/>
                <!--<el-table-column min-width='120' align='center' label='变更类型' prop='changeType'>-->
                    <!--<template slot-scope="scope">-->
                        <!--<ft-customer-change-type v-model="scope.row.changeType"-->
                                                <!--service-name="lss-customer"-->
                                                <!--type-name="customerChangeType"-->
                                                <!--:editable='false'>-->
                        <!--</ft-customer-change-type>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column prop="mainManagerName" show-overflow-tooltip label="主办客户经理" align="left"
                                 min-width="120">
                </el-table-column>
                <el-table-column prop="deptName" show-overflow-tooltip label="所属部门" align="left"
                                 min-width="120">
                </el-table-column>
                <el-table-column v-if="this.activeName === 'secondTabPane'" min-width='120' align='center' label='功能操作'>

                    <template slot-scope="scope">
                        <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                            <p>数据删除后，将不能恢复，确认删除？</p>
                            <div class="delete-group">
                                <el-button size="small" @click="scope.row.delVisible=false">取消</el-button>
                                <el-button type="danger" size="small" @click="deleteRow(scope.$index, scope.row)">确定</el-button>
                            </div>
                            <span slot="reference" class='delete-button'>
                              <el-button type="text" size="small" style="color:#B94A48">删除</el-button>
                            </span>
                        </el-popover>
                    </template>
                </el-table-column>

            </el-table>

        </ft-pagination>
    </div>
</template>

<script>

    import CustomerChangeQueryForm from "./CustomerChangeQueryForm";
    import FtCustomerChangeType from "../ft/FtCustomerChangeType";
    export default {
        name : 'CustomerChangeList',
        components : {
            'customer-change-query-form': CustomerChangeQueryForm,
            'ft-customer-change-type': FtCustomerChangeType,

        },
        props: { // 父组件向子组件传值
            activeName: ''
        },
        data() {
            return {
                // 加载表示
                loadingStatus: false,
                // 当前页数
                currentPage: 1,
                // 每页展示个数
                pageSize: 8,
                // 数据总条数
                totalElements: 0,
                // 客户变更列表结果集
                customerChangeArray: [],
                // 高级查询面板是否展示
                showQueryPanel: false,
                // 高级查询条件
                querParam: {},
                // 历史高级查询条件
                historyQueryParam: {},
            }
        },
        watch: {
            activeName() {
                this.load()
            }

        },
        methods: {
            packup(showQueryPanel) {
                this.showQueryPanel = showQueryPanel
            },
            search(querParam) {
                this.queryChange(querParam)
                this.load(this.currentPage, this.pageSize)
            },
            queryChange(querParam) {
                if (querParam) {
                    querParam.initQuery = false
                    this.querParam = querParam
                    this.historyQueryParam = querParam
                } else {
                    // 没有设置查询参数,则使用历史查询参数
                    querParam = this.historyQueryParam
                    this.querParam = querParam
                }
                this.currentPage = 1
            },
            trim() {
                return this.replace(/(^\s*)|(\s*$)/g, "")
            },
            load(pageIndex, pageSize) {
                // 动画效果，延迟0s展示
                this.loadingStatus = true
                this.loadData(pageIndex, pageSize).then(
                    resolve => {
                        setTimeout(() => {
                            this.loadingStatus = false
                        }, 0)
                    }
                )

            },
            // 从后端加载数据
            loadData(pageIndex, pageSize) {
                return new Promise((resolve, reject) => {
                    if(pageIndex !== undefined){
                        this.currentPage = pageIndex
                    }
                    if(pageSize !== undefined){
                        this.pageSize = pageSize
                    }
                    if (!this.querParam) {
                        this.querParam = {}
                    }
                    this.$http.post('/joys-rest/lss-customer/custChange/list',this.querParam,  {
                        params: {
                            status: this.activeName === 'firstTabPane' ? 'start' : 'unStart',
                            pageIndex: this.currentPage,
                            pageSize: this.pageSize,
                        }
                    }).then(
                        resp => {
                            this.totalElements = resp.body.total
                            this.customerChangeArray = resp.body.rows
                            resolve()
                        }, resp => {
                            this.loadingStatus = false
                            this.$message.error(resp.body.message)
                        }
                    )

                })
            },

            // 新增客户变更
            addCustomerChange() {
                this.$emit('add')

            },
            // 删除项目立项数据
            deleteRow(index, row) {
                this.$http.delete('/joys-rest/lss-customer/custInfo/' + row.customerId).then(
                    resp => {
                        // 重新加载数据
                        this.load()
                        this.$message.success('删除成功！')
                    }, resp => {
                        this.$message.error("删除失败！")
                    }
                )
            },

            // 由列表切换至表单界面
            changeToDetail(index, row) {
                this.$emit('changeToDetail', row)
            },

        }

    }

</script>

<style>
    .btn-long-name {
        /*单行文本溢出显示为...*/
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;/*加宽度width属来兼容部分浏览*/
        color: #0B69E0;
        text-align: left;
        padding-left: 0px;
    }

    .toolbar-button .add-button {
        margin-left: 12px
    }

    .toolbar-button .filter-input {
        width: 288px;
        margin-left: 72px
    }

    .delete-group {
        text-align: right;
        margin: 0;
    }

    .delete-button {
        margin-left: .10rem
    }
    .ft-tab .ft-pagination{

    }
</style>